<template>
  <div>
   <!-- 提示文本 -->
   <el-row style="margin-top:30px;">
       <el-col :offset="1" :span="20">
           <div style="background:rgb(224 240 255); padding:8px 16px;">
               <b><p>注意事项</p></b>
               <p>请部门领导针对该员工的近期表现填写对该员工的评价,评价内容涉及工作表现,重大违纪(若无重大违纪填写"无"),特殊贡献(若无特殊贡献填写"无"),以及其他意见等等。</p>
           </div>
       </el-col>
   </el-row>
   <!-- 步骤条 -->
   <el-row style="margin-top:30px;">
     <el-col :span="22">
        <el-steps :active="activeProgress*1" align-center finish-status="success">
          <el-step title="基本信息"></el-step>
          <el-step title="工作表现"></el-step>
          <el-step title="重大违纪"></el-step>
          <el-step title="特殊贡献"></el-step>
          <el-step title="其他意见"></el-step>
          <el-step title="完成"></el-step>
        </el-steps>
     </el-col>
   </el-row>
  <!-- 内容 -->
  <el-row style="margin-top:30px;">
    <el-col :offset="1" :span="20">
       <el-tabs tab-position="left" style="height: 500px;" v-model="activeProgress" :before-leave="beforeTabLeave">
          <el-tab-pane label="基本信息">
             <!-- 基本信息表单 -->
            <el-form :model="evaluation_object" label-position="top" :rules="FormRules" ref="FormRef">
              <el-form-item label="姓名" prop="name">
                <el-input v-model="evaluation_object.name"></el-input>
              </el-form-item>
              <el-form-item label="职务" prop="position">
                <el-input v-model="evaluation_object.position"></el-input>
              </el-form-item>
              <el-form-item label="部门">
                <el-input :value="evaluation_object.department" disabled></el-input>
              </el-form-item>
              <el-form-item label="考评日期">
                <el-date-picker
                  :value="evaluation_object.evaluation_time"
                  type="date"
                  disabled>
                </el-date-picker>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="工作表现">
            <quill-editor v-model="evaluation_content.working_performance" class="editor"></quill-editor>
          </el-tab-pane>
          <el-tab-pane label="重大违纪">
            <quill-editor v-model="evaluation_content.violation" class="editor"></quill-editor>
          </el-tab-pane>
          <el-tab-pane label="特殊贡献">
            <quill-editor v-model="evaluation_content.contribution" class="editor"></quill-editor>
          </el-tab-pane>
          <el-tab-pane label="其他意见">
            <quill-editor v-model="evaluation_content.others" class="editor"></quill-editor>
          </el-tab-pane>
          <el-tab-pane label="评价完成">
             <el-button type="primary" @click="submit">提交</el-button>
          </el-tab-pane>
       </el-tabs>
    </el-col>
  </el-row>
  </div>   
</template>

<script>
import { getEmployeeInfo } from '@/api/employee'
import { submitEvaluation } from '@/api/evaluation'
export default {
  data() {
    return {
      employeeId: this.$route.params.employeeId,
      departments:[],
      activeProgress:0, //当前步骤
      evaluation_object:{ //评价对象
          name:"",
          position:"",
          department:"财务部",
          evaluation_time: new Date()
      },
      evaluation_content:{
        working_performance:"", //工作表现
        violation:"", //违纪
        contribution:"" , //贡献
        others:"" //其他意见
      },
      FormRules:{
        name: [
          { required: true, message: '请输入员工姓名', trigger: 'blur' },
        ],
        position: [
          { required:true,message:"请输入员工职务",trigger:'blur'}
        ]
      },
      isValid:false //表单验证是否通过
    };
  },
  async mounted(){
    if(this.employeeId){
      const res = await getEmployeeInfo(this.employeeId)
      if(res.code===200){
        this.evaluation_object.name=res.data.employeeInfo.name
        this.evaluation_object.position=res.data.employeeInfo.position
      }
    }
  },
  methods: {
    //考评对象信息是否填写完成
    isFinishForm(){
      this.$refs.FormRef.validate(valid => {
        this.isValid=valid
      })
    },
    beforeTabLeave(activeName, oldActiveName) {
      if (oldActiveName === '0') {
        this.isFinishForm()
        if (!this.isValid) {
          this.$message.error('请完善基本信息')
          return false
        }
      }
    },
    //确认提交
    async submit() {
      const isSubmit = await this.$confirm('请确定是否已完成对该员工的评价', '确认提交', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).catch(err=>err)
      if(isSubmit==='cancel') return this.$message.info("已取消")
      else {
        const res = await submitEvaluation(this.evaluation_object,this.evaluation_content)
        if(res.code===200) this.$message.success("提交成功")
      }
    }
  }
};
</script>

<style scoped>
.editor{
  height:500px;
  border-bottom:1px solid #ccc
}
</style>
